<template>
    <div class="titlewhite"></div>

    <div class="nav">
        <div class="ding">
            <div class="xiao">&lt;</div>
            <div class="di">      {{dianyingyuanxinxi.name}}   </div>

        </div>
        <button class="qian">前台兑换
            <div class="da">&gt;</div>
        </button>
        <p class="xian">
            <hr>
        </p>
        <div class="ditu">
            <div class="ditul">
            {{dianyingyuanxinxi.address}}

                <div class="ditur">
                    📞
                </div>
            </div>
        </div>


        <!-- 轮播图 -->
        <!-- <div class="lun">
            <div class="tupian">
                <img class="pian1" src="./filmone.png" alt="">
                <img class="pian2" src="./filmone.png" alt="">
                <img class="pian3" src="./filmone.png" alt="">

            </div>
        </div> -->

        <!-- 插件轮播图 :interval="200"  width="50px"-->
        <el-carousel type="card" :autoplay="false" height="200px" @change="gundongMethod">
            <el-carousel-item v-for="item in dataList" :key="item">
                <!-- <h3 text="2xl" justify="center"> {{ item }}</h3> -->
                <div>
                    <!-- 1 -->
                    <img :src="item.poster">
                </div>
            </el-carousel-item>
            <li class="el-carousel__indicator el-carousel__indicator--horizontal"><button
                    class="el-carousel__button"></button></li>
        </el-carousel>
        <!-- 电影名字 -->
        <div class="biaiti" @click="changeFilmDetail(dianyingmingxinxi.filmId)">
            <p class="mingzi">{{ dianyingmingxinxi.mingzi }}
                <span class="fen">{{ dianyingmingxinxi.pingfen }}</span>
            </p>

            <div class="jieshao">{{ dianyingmingxinxi.yanyuna }}</div>

        </div>

        <div class="riqi">
            <!-- shijieliebiao -->
            <div class="yue" v-for="item in shijieliebiao" :key="item">
                <span>
                    {{ item }}
                    <!-- <span class="huo">
                          {{item}}
                    </span>
                        <span class="huo">
                           {{item}}
                    </span> -->
                </span>

            </div>
        </div>

        <div class="shi" v-for="qwe in timesList" :key="qwe">
            <div class="jie">
                <span class="shijie">
                    {{ zhuanhuanshijie(qwe.showAt) }}
                    <span class="hua">{{qwe.filmLanguage}}{{qwe.imagery}}</span>
                </span>
                <!-- 普通话 -->
                <p class="san">
               {{ zhuanhuanshijie(qwe.endAt) }}
                    <span class="zuo">{{qwe.hallName}}</span>
                <div class="jiage">

                    <p class="jinqian"> {{qwe.salePrice/100}}</p>
                    <button class="an" @click="Xuan(123)">购票</button>

                </div>
                </p>


            </div>
        </div>
    </div>

    <div class="footwhite"></div>
</template>
<style scoped>
.el-carousel__item h3 {
    /* color: #475669; */
    /* opacity: 0.75; */
    /* line-height: 200px;
  margin: 0;
  text-align: center; */
    position: relative;


}

.el-carousel__item:nth-child(2n){
      background-color: #d3dce6;
}


.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
} 



/* .el-carousel__ button {
    font-size: 55px;
    width: 50px;
    height: 600px;
} */

img {
    width: 100px;
    height: 150px;
    line-height: 150px;

    text-align: center;
    /* display:flex; */
    /* justify-content:align-items; */
    /* justify-content: center;
      align-items: center; */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

}

.el-carousel__arrow el-carousel__arrow--left {
    background-color: #FFC36D;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.nav {
    width: 100%;

}

.xiao {
    width: 100%;
    font-size: 30px;
    color: #909191;
    font-weight: 100;
}

.di {
    height: 40px;
    width: 100%;
    text-align: center;
    color: aqua;
    margin-top: 20px;
}

.qian {
    display: block;
    position: relative;
    margin: 0 auto;
    color: #FFC36D;
    border-bottom: 1px #FFC36D solid;
    border-right: 1px #FFC36D solid;
    border-top: none;
    border-left: none;
    background-color: #FFFFFF;
    padding-right: 5px;


}

.da {
    position: absolute;
    top: 0;
    left: 70px;
    font-size: 15px;
    color: red;

}

.xian {
    margin-top: 15px;
    color: #F8F8F8;
    font-weight: 100;
}

.ditu {
    width: 100%;
    margin-top: 20px;
    height: 50px;

}

.ditu .ditul {
    margin-left: 50px;
    font-size: 15px;
}

.ditu .ditur {
    float: right;
    margin-right: 20px;

}

.lun {

    white-space: nowrap;
    text-align: center;
    clear: both;
    /* width: 100%; */
    height: 200px;
    background-color: #909191;
    line-height: 200px;
    /* vertical-align: middle; */
}

.tupian img {
    white-space: nowrap;
    line-height: 200px;
    float: right;
    vertical-align: middle;
    margin-top: 25px;

}

.pian1 {
    padding-right: 485px;
}

.pian2 {
    margin-right: -374px;
}

.pian3 {
    margin-right: -637px;
}

.biaiti {
    white-space: nowrap;
    width: 100%;
    margin-top: 15px;
}

.mingzi {
    text-align: center;

}

.fen {
    color: #FFD295;
}

.jieshao {
    margin-top: 10px;
    text-align: center;
    color: #79A8CE;
    font-size: 14px;
}

.riqi {
    width: 100%;
    height: 60px;
    line-height: 60px;
    margin-top: 19px;
    border-top: 1px chartreuse solid;
    border-bottom: 1px seagreen solid;
}

.yue {
    color: #FFC36D;
    padding-left: 20px;
    display: inline-block;

}

.huo {
    margin-left: 25px;
}

.shi {
    position: relative;
    margin-top: 15px;
    width: 100%;
    height: 60px;
    border-bottom: 1px salmon solid;

}

.jie {
    width: 100%;
}

.shijie {
    margin-left: 20px;
}

.hua {
    margin-left: 73px;
}

.san {
    margin-left: 20px;
    color: #797D82;
}

.zuo {
    white-space: nowrap;
    margin-left: 40px;
    color: #797D82;
}



.jinqian {
    position: absolute;
    top: 10px;
    right: 80px;
}

.an {
    width: 50px;
    height: 20px;
    position: absolute;
    top: 12px;
    right: 20px;
    border: none;
    outline: none;
    cursor: pointer;
    background-color: #fff;
    border: 1px sandybrown solid;
    color: #FFC36D;
}

.an:active {
    background-color: aqua;

}

.el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
    text-align: center;
}

.el-carousel__item:nth-child(2n) {
    background-color: #fff;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #fff;

}
</style>
<script>
import { getYingYuan1, getYingYuan2, getShiJie } from "../api/product";
export default {
    data() {
        return {
            dianyingyuanxinxi:{},
            dataList: [],
            // diyi: '',
            // dier: '',
            // disan: '',
            timesList: [],  //场次数组
            dianyingmingxinxi: {
                filmId: 0,
                mingzi: "",
                pingfen: "",
                yanyuna: "",
            },
            shijieliebiao: [] //'今天8月13日','后天8月14日', '后天8月15日'
        };
    },


    created() {
        // let days = [];
        this.chuangjianshijian();

        getYingYuan1().then((res) => {
          // console.log('~~~~~~~~~~~~~~',res);

            this.dataList = res.data.data.films;
     
        });

        getYingYuan2(this.$route.query.cinemaId).then((res) => {
          // console.log(res);
  console.log(   this.$route.query.cinemaId);
         this.dianyingyuanxinxi = res.data.data.cinema;
  console.log("--222---",this.dianyingyuanxinxi)
        });

    },

    methods: {
        chuangjianshijian() {
            // let days = []
            var date = new Date()
            for (let i = 0; i <= 24 * 6; i += 24) {
                //今天加上前6天
                let dateItem = new Date(date.getTime() + i * 60 * 60 * 1000) //使用当天时间戳减去以前的时间毫秒（小时*分*秒*毫秒）
                let y = dateItem.getFullYear() //获取年份
                let m = dateItem.getMonth() + 1 //获取月份js月份从0开始，需要+1
                let d = dateItem.getDate() //获取日期
                m = addDate0(m) //给为单数的月份补零
                d = addDate0(d) //给为单数的日期补零
                let valueItem = y + '-' + m + '-' + d //组合
                this.shijieliebiao.push(valueItem) //添加至数组
            }
            //给日期加0
            function addDate0(time) {
                if (time.toString().length == 1) {
                    time = '0' + time.toString()
                }
                return time
            }
            // return days
        },

        changeFilmDetail(code) {
            this.$router.push({
                name: "detail",
                query: {
                    eee: code
                }
            });
        },

        Xuan(code) {
                 this.$router.push({
                name: "XuanZuo",
                query: {
                    eee: code
                }
            });
        },
        zhuanhuanshijie(data) {
            // 转换时间

            let time = Number(data);
            let d = Math.floor(time / 86400);
            let h = Math.floor((time % 86400) / 3600);
            let m = Math.floor((time % 86400) % 3600 / 60);
            let s = parseInt(time % 86400) % 3600 % 60;

            let hh = h < 10 ? "0" + h : h;
            let mm = m < 10 ? "0" + m : m;
            let ss = s < 10 ? "0" + s : s;

            return hh + ":" + mm + ":" + ss;



        },
        gundongMethod(item) {
            // console.log("-----------------")
            // console.log(this.dataList[item]);
            //  console.log(this.dataList[item].filmId);
            this.dianyingmingxinxi.filmId = this.dataList[item].filmId;
            this.dianyingmingxinxi.mingzi = this.dataList[item].name;
            this.dianyingmingxinxi.pingfen = this.dataList[item].grade + '分';
            this.dianyingmingxinxi.yanyuna = this.dataList[item].category + '|'
                + this.dataList[item].runtime + '|' + '分钟'
                + this.dataList[item].actors[0].name + '|'
                + this.dataList[item].actors[0].name
                + this.dataList[item].actors[1].name
                + this.dataList[item].actors[2].name
                + this.dataList[item].director;

            // this.diyi = this.dataList[item].name;
            // this.dier = this.dataList[item].grade + '分'
            // this.disan = this.dataList[item].category + '|'
            //     + this.dataList[item].runtime + '|' + '分钟'
            //     + this.dataList[item].actors[0].name + '|'
            //     + this.dataList[item].actors[0].name
            //     + this.dataList[item].actors[1].name
            //     + this.dataList[item].actors[2].name
            //     + this.dataList[item].director;
            // console.log(this.dataList[item].name);
            // console.log(this.dataList[item].grade + '分');
            // console.log(this.dataList[item].category + '|'
            //     + this.dataList[item].runtime + '|' + '分钟'
            //     + this.dataList[item].actors[0].name + '|'
            //     + this.dataList[item].actors[0].name
            //     + this.dataList[item].actors[1].name
            //     + this.dataList[item].actors[2].name
            //     + this.dataList[item].director);

            //   console.log(this.dataList[item].runtime);
            //   console.log(this.dataList[item].actors[0].role);
            //    console.log(this.dataList[item].name);
            //          console.log(this.dataList[item].director); 
            //  let date = new Date().getTime/1000 //秒级的时间戳


                  var nowTime = parseInt(new Date(new Date().toLocaleDateString()).getTime()/1000)
          

            getShiJie(this.dataList[item].filmId, nowTime,this.$route.query.cinemaId).then((res) => {

                this.timesList = res.data.data.schedules

                console.log(">>>>>>>", res.data.data.schedules)
            });
        },
    },
};
</script>
